<template>
  <el-card>
    <el-row type="flex" justify="end">
      <el-col><el-button type="primary" @click="addHouse"> 添加房产</el-button></el-col>
      <el-col>
        <el-row type="flex" justify="end">
          <el-select v-model="formdata.title" placeholder="全部分类" size="mini" clearable>
            <el-option v-for="item in classifyTitle" :key="item.id" :value="item.id" :label="item.title" />
          </el-select>
          <el-select v-model="formdata.name" placeholder="全部经纪" size="mini" clearable>
            <el-option v-for="(item,index) in brokerList" :key="item.id" :value="index" :label="item.name" />
          </el-select>
          <!-- 搜索框 -->
          <el-input v-model="input" placeholder="请输入内容" size="mini" />
          <el-button size="mini" @click="search">筛选</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- 分割线 -->
    <div class="line" />
    <!-- 表格
     -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="photos" label="封面" width="180">
        <template v-slot="{row}">
          <!-- {{ row }} -->
          <img :src="row.image" alt="" class="img">
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="150" />
      <el-table-column prop="tags" label="标签" width="150">
        <template v-slot="{row}">
          <el-tag v-for="item in row.tags" :key="item" type="success">{{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" width="120" />
      <el-table-column prop="category.title" label="分类" width="120" />
      <el-table-column prop="agent.name" label="经纪" width="120" />
      <el-table-column prop="price" label="价格" width="120" />
      <el-table-column prop="desc" label="介绍" width="180" />
      <el-table-column prop="name" label="图片" width="150">
        <template v-slot="{row}">
          <!-- <img :src="row.photos[1]" alt="" > -->
          <img v-for="item in row.photos" :key="item.id" :src="item" alt="" class="img">
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template v-slot="{row}">
          <el-button type="primary" @click="edit(row.id)">编辑</el-button>
          <el-button type="danger" @click="delrouser(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row type="flex" justify="center">
      <el-pagination
        :page-size="list._limit"
        layout="prev, pager, next"
        :total="tableDataList"
        @current-change="currentChange"
      />
    </el-row>
    <popUp ref="form" :dialog-visible.sync="dialogVisible" :classify-title="classifyTitle" :broker-list="brokerList" @update="gethouserlist" />
  </el-card>
</template>

<script>
// 引入弹框
import { gethouser, classify, getbroker, search, delrouser, getotal } from '@/api/houserMange'
import popUp from './compoents/popUp.vue'
// import { addrees } from '@/api/axios'
export default {
  components: {
    popUp
  },

  data() {
    return {

      formdata: {
        title: '', // 分类
        name: '' // 经济
      },
      tableDataList: 0,
      dialogVisible: false,
      input: '',
      tableData: [],
      classifyTitle: [],
      brokerList: [],
      list: {
        _limit: 3,
        _start: 0
      }
    }
  },
  async created () {
    //  渲染
    this.gethouserlist()
    // 获取分类
    const res = await classify()
    // console.log(res)

    this.classifyTitle = res

    // 获取经纪、
    const broker = await getbroker()
    // console.log(broker)

    this.brokerList = broker
  },
  methods: {
    // 分页
    currentChange(data) {
      this.list._start = (data - 1) * this.list._limit
      this.gethouserlist()
    },
    // 获取列表、
    async  gethouserlist() {
      this.tableData = await gethouser(this.list)
      // console.log(111, res)
      const total = await getotal()
      this.tableDataList = total
    },
    // 弹窗
    addHouse() {
      this.dialogVisible = true
    },
    // 搜索
    async search() {
      if (this.input || this.formdata.title || this.formdata.name) {
        const res = await search({
          _limit: this.list._limit,
          _start: this.list._start,
          title_contains: this.input || null,
          category: this.formdata.title || null, // 分类
          agent: this.formdata.name || null// 经济
        })
        // 选出的值赋值到列表
        this.tableData = res
        this.tableDataList = res.length
      } else {
        this.gethouserlist()
      }
    },
    // 删除房产
    async delrouser(id) {
      // console.log(id)
      this.$confirm('你确定删除吗', '删除', {
        type: 'warning'
      }).then(async() => {
        await delrouser(id)
        this.gethouserlist()
      }).catch(() => {

      })
    },
    // 编辑
    async edit(id) {
      this.dialogVisible = true
      //  传递id进行回显
      // this.editId = id
      // console.log()
      this.$nextTick(() => {
        this.$refs.form.editHuixian(id)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table{
margin-top: 15px;
}
.line{
    margin:  20px  0;
    height: 0;
    width: 100%;
    border:  solid  #edf0f6  1px;
}
.img{
  width: 200px;
  height: 150px;
}
</style>
